<template>
	<view class="shop page bgf6 p15">
		<view class="bgff py12 px20">
			<view class="flex flexC">
				<input class="px10 flex1 bor r40 py5" type="text" placeholder="请输入搜索的商品" placeholder-class="cbe"
					v-model="keyword">
				<view class="pl10" @click="clickSelectShop">
					<text v-if="cate == null">全部</text>
					<text v-else>{{cate.name}}</text>
					<text class="c00 ml5 fs12">▼</text>
				</view>
				<button @click="getList()" class="bg41  fs13 r40  ml16 btn">搜索</button>

			</view>
		</view>
		<view v-for="(item,index) in list" :key="index" @click="clickDetail(item)"
			class="flex flexC bgff r7 mb12 px10 py22">
			<image class="w82 r6" :src="item.image" mode="aspectFill"></image>
			<view class="flex1 ml12">
				<view class="flex flexC flexB">
					<text class="bold6 ellipsis1">{{item.title}}</text>
					<text class="arrowR mr4"></text>
				</view>
				<view class="mb14 mt6">{{item.cate.name}}</view>
				<view v-for="(spec,sIndex) in item.specTableList" class="mb14 mt6 cff0">{{spec.value[0]}}
					￥{{spec.sales_price}}</view>

			</view>
		</view>


		<view class="add r50 bged aliC" @click="clickAdd">添加</view>
		<uni-popup ref="setPop" type="bottom">
			<view class="popup-content2">
				<button class="popup-btn button" @click="clickDelete">删除</button>
				<button class="popup-btn button" @click="clickUpdate">修改</button>

				<view class="popup-btn" @click="$refs.setPop.close()">取消</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				shop_id: '',
				cateList: [],
				cate: null,
				cate_id: '',
				currentItem: null,
				keyword: ''
			};
		},

		onLoad(option) {

			this.shop_id = option.shop_id;
		},
		onShow() {
			var cate = uni.getStorageSync("cate");
			
			if (cate != null && cate != "") {
				this.cate = JSON.parse(cate);
				this.cate_id = this.cate.id;

			}
			this.getList();
		},
		methods: {
			
			

			clickUpdate() {
				uni.navigateTo({
					url: '/other/online/goodUpdate?shop_id=' + this.shop_id + "&id=" + this.currentItem.id
				})
			},

			clickAdd() {

				uni.navigateTo({
					url: '/other/online/goodAdd?shop_id=' + this.shop_id
				})
			},
			clickSelectShop() {
				uni.navigateTo({
					url: '/other/online/selectCateList?shop_id=' + this.shop_id
				})

			},

			clickDelete() {
				let param = {
					id: this.currentItem.id
				};
				let that = this;
				this.$api.onlineDeleteGood(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.$refs.setPop.close();
						that.getList();

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

			getList() {
				let param = {
					shop_id: this.shop_id,
					cate_id: this.cate_id,
					keyword:this.keyword
				};
				let that = this;
				this.$api.onlineGoodList(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.list = res.data;
					} else {

					}
				})
			},


			clickDetail(item) {

				this.currentItem = item;
				this.$refs.setPop.open();

			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop {
		.w82 {
			width: 164rpx;
			height: 164rpx;
		}

		.ellipsis1 {
			max-width: 400rpx;
		}

		.add {
			position: fixed;
			bottom: 100px;
			right: 10rpx;
			width: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
			border: 2rpx solid #F5C51D;
		}

		.btn {
			line-height: 60rpx;
			width: 100rpx;

		}


		.popup-content2 {
			background: #FFFFFF;

			.popup-btn {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				border-bottom: 1px solid #f5f5f5;
				background: #FFFFFF;
			}

			.button {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				border-bottom: 1px solid #f5f5f5;
				background: #FFFFFF;
				font-size: 11pt;
			}

			button::after {
				border: none;
			}

			.pt20 {
				border-bottom: 20rpx solid #f5f5f5;
			}
		}

	}
</style>